<template>
  <div class="page-content">
    <MenuBar v-if="!isMobile" passTab="4" />

    <PhoneMenuBar v-else />

    <div style="height: 70px;"></div>

    <div style="background: #eeeeee;padding:5px 250px;display: flex;align-items: center;"
      v-if="!isfromSearch && !isMobile">

      <n-breadcrumb separator=">">
        <n-breadcrumb-item>
          <RouterLink to="/">
            <n-icon size="16" color="#999999">
              <Home />
            </n-icon>首页

          </RouterLink>

        </n-breadcrumb-item>
        <n-breadcrumb-item>
          <RouterLink to="/news">
            新闻资讯
          </RouterLink>

        </n-breadcrumb-item>
        <n-breadcrumb-item>
          {{ pInfo.title }}
        </n-breadcrumb-item>
      </n-breadcrumb>
    </div>

    <div class="page-product">

      <div class="item-title" style="margin-top: 15px;">{{ pInfo.title }}</div>

      <div class="item-brand">
        <n-icon size="16" color="#333333">
          <EyeSharp />
        </n-icon>
        <div style="margin-left: 5px;">{{ pInfo.hits }}</div>
      </div>


      <div class="item-addtime">发布时间：{{ pInfo.addtime }}</div>
      <div style="margin-top: 15px;" class="rich-layout" v-if="pInfo.content != ''">
        <div class="rich-text-content" v-html="pInfo.content"></div>
      </div>

    </div>

    <BottomBar />
  </div>
</template>

<script setup name="productListPage">
import { Home, EyeSharp } from '@vicons/ionicons5'
import { API_URL } from '@/config'
import { getAdvanceInfo } from '@/api'
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import MenuBar from '@/components/MenuBar.vue'
import PhoneMenuBar from '@/components/PhoneMenuBar.vue'
import BottomBar from '@/components/BottomBar.vue'
// 创建一个响应式变量来存储是否为移动设备
const isMobile = ref(false);

// 定义一个函数来检查用户代理
const checkDevice = () => {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;

  // 设置isMobile的值
  isMobile.value = /android/i.test(userAgent) || /iPhone|iPad|iPod/i.test(userAgent);
};


const pInfo = ref({})
const imageUrls = ref([])

const checkProductInfo = async () => {
  const params = {
    id: route.query.advanceId || -1,
  }
  const result = await getAdvanceInfo(params)

  console.log("newsList", result)

  if (result != null && result.data != null) {

    pInfo.value = result.data

    // 提取所有图片 URL
    if (result.data.displayimg != null && result.data.displayimg != '') {
      imageUrls.value = result.data.displayimg?.split('|').map(item => {
        const parts = item.split('*');
        const realImgUrl = parts[1]?.startsWith('../') ? API_URL + parts[1].substring(2) : parts[1]
        return realImgUrl; // 第二部分是 URL（索引为 1）
      });

    }

  }
}


const route = useRoute()

const isfromSearch = ref(false)

onMounted(() => {
  isfromSearch.value = route.query.fromSearch || false

  checkDevice();

  checkProductInfo()

});


const themeOverrides = {
  Carousel: {
    // 修改激活且悬停时的文字颜色
    dotColor: '#999999', // 例如改为红色
    dotColorActive: '#00aeff', // 例如改为红色
    // 其他常用颜色也可一并定制：
    // itemColorActive: 'darkblue',           // 激活状态下的文字颜色（非悬停）
    // itemColorHover: 'orange',               // 非激活但悬停时的颜色
    // itemColor: '#333',                      // 默认文字颜色
    // itemColorActiveCollapsed: 'lightblue',  // 折叠菜单中激活项颜色
  }
}

</script>

<style scoped lang="scss">
/* 容器样式 */
.page-content {
  width: 100vw;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  // justify-content: left;


  @media (min-width: 769px) {
    .page-product {
      min-height: 450px;
      padding: 5px 350px;
      display: flex;
      flex-direction: column;

      .item-title {
        font-size: 30px;
        color: #111111;
        font-weight: bold;
        line-height: 140%;
      }

      .item-brand {
        color: #333333;
        font-size: 14px;
        margin-top: 10px;
        font-weight: 400;
        display: flex;
        align-items: center;
      }

      .item-addtime {
        color: #111111;
        font-size: 14px;
        margin-top: 5px;
      }

      .item-number {
        color: #111111;
        font-size: 14px;
        font-weight: 500;
      }

      .item-money {
        color: #111111;
        font-size: 18px;
        font-weight: bold;
      }

      .item-descript {
        background: white;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 20px;
        color: #111111;
        font-size: 14px;
        line-height: 170%
      }

      .item-pic {
        display: flex;
        justify-content: center;
        object-position: center;
        width: 100%;
        height: auto;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
        object-fit: cover;
      }
    }
  }

  /* 手机端样式 */
  @media (max-width: 768px) {
    .page-product {
      min-height: 450px;
      padding: 5px 8px;
      display: flex;
      flex-direction: column;

      .item-title {
        font-size: 18px;
        color: #111111;
        font-weight: bold;
        line-height: 140%;
      }

      .item-brand {
        color: #333333;
        font-size: 14px;
        margin-top: 10px;
        font-weight: 400;
        display: flex;
        align-items: center;
      }

      .item-addtime {
        color: #111111;
        font-size: 14px;
        margin-top: 5px;
      }

      .item-number {
        color: #111111;
        font-size: 14px;
        font-weight: 500;
      }

      .item-money {
        color: #111111;
        font-size: 18px;
        font-weight: bold;
      }

      .item-descript {
        background: white;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 20px;
        color: #111111;
        font-size: 14px;
        line-height: 170%
      }

      .item-pic {
        display: flex;
        justify-content: center;
        object-position: center;
        width: 100%;
        height: auto;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
        object-fit: cover;
      }
    }
  }

  .rich-layout {

    width: 100%;


    .rich-text-content {
      box-sizing: border-box;
      padding: 15px;
      background: white;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
    }

    :deep(.rich-text-content img) {
      width: 100% !important;
      height: auto;
      display: block;
      margin: 0px auto;
    }

    :deep(.rich-text-content p) {
      margin: 0;
      // text-align: center;
    }
  }

  :deep(.n-carousel .n-carousel__arrow) {
    background-color: #999999 !important;
  }

  //  :deep(.met-editor .clearfix) {
  //     padding: 0px !important;
  //   }




}
</style>